<!-- 全屏的 -->
<ng-container *ngIf="!cssClass; else elseTemplateCssClass">
    <ion-header *ngIf="titleBar && titleBar!=={} "
        [ngClass]="{ 'header-orange': titleBar.cssStyle === 'orange','header-white': titleBar.cssStyle === 'white'}"
        translucent="false">
        <ion-toolbar id="superToolbar"
            [ngClass]="{'isShow': isHeader,'bg-image':showWaterImg,'title-laijian': titleBar.cssStyle === 'laijian', 'title-orange': titleBar.cssStyle === 'orange','title-transparent': titleBar.cssStyle === 'transparent','title-white': titleBar.cssStyle === 'white','title-sharePage': titleBar.cssStyle === 'sharePage','title-shareCustomerPage': titleBar.cssStyle === 'shareCustomerPage','bottom-line': (titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ) && titleBar.bottomLine !== false }">
            <ng-container *ngIf="titleBar.title &&  (!titleBar.title.layout || titleBar.title.layout === 'center')">
                <ion-title class="nav-title" *ngIf="titleBar.title">{{titleBar.title.labelName}}</ion-title>
            </ng-container>
            <ng-container *ngIf="titleBar.title && titleBar.title.layout === 'left'">
                <ion-buttons slot="start" class="start" class="nav-title nav-title-left">
                    {{titleBar.title.labelName}}
                </ion-buttons>

            </ng-container>

            <ng-container *ngIf="titleBar.back">
                <ng-container *ngIf="titleBar.back.layout==='left'">
                    <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
                        <ng-container
                            *ngIf="titleBar.cssStyle === 'transparent' || titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <img class="header-icon-img" style="margin-right: 0px;" src="assets/img/close.png"
                                alt="back">
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <img class="header-icon-img" src="assets/img/nav_icon_back_white@3x.png"
                                alt="back">
                        </ng-container>
                        <ng-container
                            *ngIf="titleBar.cssStyle === 'laijian'||titleBar.cssStyle === 'sharePage'||titleBar.cssStyle === 'shareCustomerPage'">
                            <img class="header-icon-img" src="assets/img/back_left.png" alt="back">
                        </ng-container>
                    </ion-buttons>
                </ng-container>

                <ng-container *ngIf="titleBar.back.layout==='right'">
                    <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="back()">
                        <ng-container
                            *ngIf="titleBar.cssStyle === 'transparent' || titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                            <img class="header-icon-img-r" src="assets/img/back_left.png" alt="back">
                        </ng-container>
                        <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                            <img class="header-icon-img-r" src="assets/img/nav_icon_back_white@3x.png"
                                alt="back">
                        </ng-container>
                    </ion-buttons>
                </ng-container>
            </ng-container>

            <!-- textButton 确定 提价表单用的  -->
            <ng-container *ngIf="titleBar.textButton">
                <ng-container *ngIf="titleBar.textButton.layout==='left'">
                    <ion-buttons slot="start" class="start"
                        [ngClass]="{'titleBar-right-box': !titleBar.textButton.cssStyle,'titleBar-right-box-white': titleBar.textButton.cssStyle}"
                        appDebounceClick (debounceClick)="textButton(titleBar.textButton)">
                        <span class="titleBar-textBtn"
                            [ngStyle]="titleBar.textButton.link?.params?.labelCssStyle | styleFilter">{{titleBar.textButton.label}}</span>
                    </ion-buttons>
                </ng-container>
                <ng-container *ngIf="titleBar.textButton.layout==='right'">
                    <ion-buttons slot="end" class="end"
                        [ngClass]="{'titleBar-right-box': !titleBar.textButton.cssStyle,'titleBar-right-box-white': titleBar.textButton.cssStyle}"
                        appDebounceClick (debounceClick)="textButton(titleBar.textButton)">
                        <span class="titleBar-textBtn"
                            [ngStyle]="titleBar.textButton.link?.params?.labelCssStyle | styleFilter">{{titleBar.textButton.label}}</span>
                    </ion-buttons>
                </ng-container>
            </ng-container>

            <!--1.6.34新增iconButton-->

            <!-- iconButton 数组形式最终可能是用这个替代所以的图标 btn -->
            <ng-container *ngIf="titleBar.iconButton && titleBar.iconButton.length">
                <ng-container *ngFor="let item of titleBar.iconButton">
                    <ng-container *ngIf="item.layout==='left'">
                        <ion-buttons slot="start" class="start" [ngStyle]="item.cssStyle | styleFilter"
                            appDebounceClick (debounceClick)="iconButtonClick(item)">
                            <ng-container *ngIf="item.label && item.label.length > 0; else elseIcon">
                                {{item.label}}
                            </ng-container>
                            <ng-template #elseIcon>
                                <img *ngIf="item.icon.indexOf('http') > -1" class="header-icon-img"
                                    [ngStyle]="item.iconCssStyle | styleFilter" src="{{item.icon}}" alt="iconButton">
                                <img *ngIf="item.icon.indexOf('http') === -1 " class="header-icon-img"
                                    [ngStyle]="item.iconCssStyle | styleFilter" src="assets/icon/{{item.icon}}"
                                    alt="iconButton">
                            </ng-template>


                        </ion-buttons>
                    </ng-container>
                    <ng-container *ngIf="item.layout==='right'">
                        <ion-buttons slot="end" class="end" [ngStyle]="item.cssStyle | styleFilter"
                            appDebounceClick (debounceClick)="iconButtonClick(item)">
                            <ng-container *ngIf="item.label && item.label.length > 0; else elseIcon">
                                {{item.label}}
                            </ng-container>
                            <ng-template #elseIcon>
                                <img *ngIf="item.icon.indexOf('http') > -1" class="header-icon-img"
                                    [ngStyle]="item.iconCssStyle | styleFilter" src="{{item.icon}}" alt="iconButton">
                                <img *ngIf="item.icon.indexOf('http') === -1 " class="header-icon-img"
                                    [ngStyle]="item.iconCssStyle | styleFilter" src="assets/icon/{{item.icon}}"
                                    alt="iconButton">
                            </ng-template>

                        </ion-buttons>
                    </ng-container>
                </ng-container>
            </ng-container>


            <ng-container *ngIf="titleBar.cancel">
                <ng-container *ngIf="titleBar.cancel.layout==='left'">
                    <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
                        <span
                            [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
                    </ion-buttons>
                </ng-container>
                <ng-container *ngIf="titleBar.cancel.layout==='right'">
                    <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="back()">
                        <span
                            [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
                    </ion-buttons>
                </ng-container>
            </ng-container>

            <ng-container *ngIf="titleBar.close">
                <ng-container *ngIf="titleBar.close.layout==='left'">
                    <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
                        <img class="header-icon-img" src="assets/img/close.png" alt="back">
                    </ion-buttons>
                </ng-container>
                <ng-container *ngIf="titleBar.close.layout==='right'">
                    <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="back()">
                        <img class="header-icon-img-r" src="assets/img/close.png" alt="back">
                    </ion-buttons>
                </ng-container>
            </ng-container>


        </ion-toolbar>

        <app-common-nested-tag [currentDataArray]="headerTags">
        </app-common-nested-tag>
    </ion-header>

    <ion-content force-overscroll="true" overflow-scroll="true" has-bouncing="true" [scrollEvents]="true"
        [scrollY]="contentTags&&contentTags[0]?.style !== 'videos'" class="gray-bg"
        [ngClass]="{'white-bg': !isGrayBg ,'bg-image':showWaterImg}">

        <app-common-nested-tag [currentDataArray]="contentTags">
        </app-common-nested-tag>

    </ion-content>

    <ion-footer *ngIf="footerTags && footerTags.length>0" style="background: white;"
        [ngClass]="{'bg-image':showWaterImg}">
        <app-common-nested-tag [currentDataArray]="footerTags">
        </app-common-nested-tag>
    </ion-footer>
</ng-container>
<ng-template #elseTemplateCssClass>

    <ng-container *ngIf="cssClass && cssClass !== 'customHeightPage'; else elseTemplateCustomHeightPage">
        <!-- 自适应小窗modal auto-height-->
        <div class="modal-bg 1" appDebounceClick (debounceClick)="dismissClick()">
            <div class="auto-height"
                [ngClass]="{'bottom-modal': cssClass === 'bottom','video-modal':cssClass==='video-modal'}"
                appDebounceClick (debounceClick)="onCancelClick($event)" [ngStyle]="cssStyle | styleFilter">
                <app-common-nested-tag [currentDataArray]="tags">
                </app-common-nested-tag>
            </div>
        </div>
    </ng-container>
    <ng-template #elseTemplateCustomHeightPage>
        <!-- modal Custom-height-->
        <div class="modal-bg 2" appDebounceClick (debounceClick)="dismissClick()">
            <div id="full-screen-modal" class="full-screen-modal" appDebounceClick (debounceClick)="onCancelClick($event)"
                [ngStyle]="cssStyle | styleFilter">
                <ion-header id="full-screen-modal-header" *ngIf="titleBar && titleBar!=={} || titleBar === undefine "
                    [ngClass]="{ 'header-orange': titleBar && titleBar.cssStyle === 'orange','header-white': titleBar && titleBar.cssStyle === 'white'}"
                    translucent="false">
                    <ion-toolbar id="superToolbar" *ngIf="titleBar && titleBar!=={} "
                        [ngClass]="{'isShow': isHeader,'bg-image':showWaterImg,'title-laijian': titleBar.cssStyle === 'laijian', 'title-orange': titleBar.cssStyle === 'orange','title-transparent': titleBar.cssStyle === 'transparent','title-white': titleBar.cssStyle === 'white','title-sharePage': titleBar.cssStyle === 'sharePage','title-shareCustomerPage': titleBar.cssStyle === 'shareCustomerPage','bottom-line': (titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ) && titleBar.bottomLine !== false }">
                        <ng-container
                            *ngIf="titleBar.title &&  (!titleBar.title.layout || titleBar.title.layout === 'center')">
                            <ion-title class="nav-title" *ngIf="titleBar.title">{{titleBar.title.labelName}}</ion-title>
                        </ng-container>
                        <ng-container *ngIf="titleBar.title && titleBar.title.layout === 'left'">
                            <ion-buttons slot="start" class="start" class="nav-title nav-title-left">
                                {{titleBar.title.labelName}}
                            </ion-buttons>

                        </ng-container>

                        <ng-container *ngIf="titleBar.back">
                            <ng-container *ngIf="titleBar.back.layout==='left'">
                                <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
                                    <ng-container
                                        *ngIf="titleBar.cssStyle === 'transparent' || titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                                        <img class="header-icon-img" style="margin-right: 0px;"
                                            src="assets/img/close.png" alt="back">
                                    </ng-container>
                                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                                        <img class="header-icon-img"
                                            src="assets/img/nav_icon_back_white@3x.png" alt="back">
                                    </ng-container>
                                    <ng-container
                                        *ngIf="titleBar.cssStyle === 'laijian'||titleBar.cssStyle === 'sharePage'||titleBar.cssStyle === 'shareCustomerPage'">
                                        <img class="header-icon-img" src="assets/img/back_left.png" alt="back">
                                    </ng-container>
                                </ion-buttons>
                            </ng-container>

                            <ng-container *ngIf="titleBar.back.layout==='right'">
                                <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="back()">
                                    <ng-container
                                        *ngIf="titleBar.cssStyle === 'transparent' || titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
                                        <img class="header-icon-img-r" src="assets/img/back_left.png"
                                            alt="back">
                                    </ng-container>
                                    <ng-container *ngIf="titleBar.cssStyle === 'orange'">
                                        <img class="header-icon-img-r"
                                            src="assets/img/nav_icon_back_white@3x.png" alt="back">
                                    </ng-container>
                                </ion-buttons>
                            </ng-container>
                        </ng-container>

                        <!-- textButton 确定 提价表单用的  -->
                        <ng-container *ngIf="titleBar.textButton">
                            <ng-container *ngIf="titleBar.textButton.layout==='left'">
                                <ion-buttons slot="start" class="start"
                                    [ngClass]="{'titleBar-right-box': !titleBar.textButton.cssStyle,'titleBar-right-box-white': titleBar.textButton.cssStyle}"
                                    appDebounceClick (debounceClick)="textButton(titleBar.textButton)">
                                    <span class="titleBar-textBtn"
                                        [ngStyle]="titleBar.textButton.link?.params?.labelCssStyle | styleFilter">{{titleBar.textButton.label}}</span>
                                </ion-buttons>
                            </ng-container>
                            <ng-container *ngIf="titleBar.textButton.layout==='right'">
                                <ion-buttons slot="end" class="end"
                                    [ngClass]="{'titleBar-right-box': !titleBar.textButton.cssStyle,'titleBar-right-box-white': titleBar.textButton.cssStyle}"
                                    appDebounceClick (debounceClick)="textButton(titleBar.textButton)">
                                    <span class="titleBar-textBtn"
                                        [ngStyle]="titleBar.textButton.link?.params?.labelCssStyle  | styleFilter">{{titleBar.textButton.label}}</span>
                                </ion-buttons>
                            </ng-container>
                        </ng-container>


                        <ng-container *ngIf="titleBar.cancel">
                            <ng-container *ngIf="titleBar.cancel.layout==='left'">
                                <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
                                    <span
                                        [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
                                </ion-buttons>
                            </ng-container>
                            <ng-container *ngIf="titleBar.cancel.layout==='right'">
                                <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="back()">
                                    <span
                                        [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
                                </ion-buttons>
                            </ng-container>
                        </ng-container>

                        <ng-container *ngIf="titleBar.close">
                            <ng-container *ngIf="titleBar.close.layout==='left'">
                                <ion-buttons slot="start" class="start" appDebounceClick (debounceClick)="back()">
                                    <img class="header-icon-img" src="assets/img/close.png" alt="back">
                                </ion-buttons>
                            </ng-container>
                            <ng-container *ngIf="titleBar.close.layout==='right'">
                                <ion-buttons slot="end" class="end" appDebounceClick (debounceClick)="back()">
                                    <img class="header-icon-img-r" src="assets/img/close.png" alt="back">
                                </ion-buttons>
                            </ng-container>
                        </ng-container>


                    </ion-toolbar>

                    <app-common-nested-tag [currentDataArray]="headerTags">
                    </app-common-nested-tag>
                </ion-header>

                <ion-content id="full-screen-modal-content" force-overscroll="true" overflow-scroll="true"
                    has-bouncing="true" [scrollEvents]="true"
                    [scrollY]="contentTags&&contentTags[0]?.style !== 'videos'" class="gray-bg"
                    [ngClass]="{'white-bg': !isGrayBg ,'bg-image':showWaterImg}">

                    <app-common-nested-tag [currentDataArray]="contentTags">
                    </app-common-nested-tag>

                </ion-content>

                <ion-footer id="full-screen-modal-footer" style="background: white;"
                    *ngIf="footerTags && footerTags.length>0" [ngClass]="{'bg-image':showWaterImg}">
                    <app-common-nested-tag [currentDataArray]="footerTags">
                    </app-common-nested-tag>
                </ion-footer>
            </div>
        </div>
    </ng-template>

</ng-template>